<template>
  <el-aside :theme="sideTheme" :width="collapse? '50px' : '240px'" :class="['side-menu', 'beauty-scroll']" :collapsible="collapsible" :trigger="null">
    <i-menu :theme="theme" :collapse="collapse" :router="true" :default-active="$route.fullPath" :options="menuData" @select="onSelect" class="menu"/>
    <i :class="'menu-toggle-icon ' + (collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold')" @click="toggleCollapse"/>
  </el-aside>
</template>

<script>
import IMenu from './menu'
export default {
  name: 'SideMenu',
  components: {IMenu},
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapse: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  computed: {
    sideTheme() {
      return this.theme == 'light' ? this.theme : 'dark'
    },
  },
  methods: {
    onSelect (obj) {
      // this.$router.push(obj);
      this.$emit('menuSelect', obj);
    },
    toggleCollapse () {
      this.$emit('toggleCollapse')
    },
  }
}
</script>

<style lang="scss" scoped>
@import "index";
</style>
